<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb scoped class="breadcrumb" separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 角色列表 -->
  <el-table :data="rolesData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 一级权限 -->
        <el-row class="first" v-for="item1 in props.row.children" :key="item1.id">
          <el-col :span="4">
            <el-tag closable>{{item1.authName}}</el-tag>
            <i class="el-icon-arrow-right"></i>
          </el-col>
          <el-col :span="20">
            <!-- 二级权限 -->
            <el-row v-for="item2 in item1.children" :key="item2.id">
              <el-col :span="4" class="second">
                <el-tag closable type="success">{{item2.authName}}</el-tag>
                <i class="el-icon-arrow-right"></i>
              </el-col>
              <!-- 三级权限 -->
              <el-col :span="20">
                <el-tag class="three" v-for="item3 in item2.children" :key="item3.id" closable type="info">{{item3.authName}}</el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column type="index" :index="indexMethod" width="80">
    </el-table-column>
    <el-table-column label="角色名称" prop="roleName" width="180">
    </el-table-column>
    <el-table-column label="描述" prop="roleDesc" width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" plain></el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" plain></el-button>
        <el-button @click="openPowerDialog(scope.row)" type="success" plain size="mini"><i class="el-icon-check"></i>
          分配角色</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分配权限对话框 -->
  <!-- default-expand-all 是否展开所有节点 -->
  <el-dialog title="角色授权" :visible.sync="rolesFormVisible">
    <el-tree :data="powerData" show-checkbox node-key="id"
      :props="defaultProps" ref="powerTree" default-expand-all>
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="rolesFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmImpower">确 定</el-button>
    </div>
  </el-dialog>
</div>
